<!--
 * @Author: lixb
 * @Date: 2020-08-26 17:54:33
 * @LastEditTime: 2020-09-26 19:54:14
 * @Descripttion: 所有菜单，从首页点击更多展示
-->

<template>
  <div>
    <wf-el-drawer
      title="全部菜单"
      :visible.sync="isShow"
      :direction="direction"
      :show-close="false"
      size="800px"
      :before-close="beforeClose"
    >
      <div class="all-menu-wrap">
        <div v-for="(w, index) in menuList" :key="index">
          <div class="module-title">
            <div>{{ w.authName }}</div>
          </div>
          <div class="module-item">
            <div
              v-for="item in w.childZTrees"
              :key="item.authNo"
              class="item-wrap"
              @click="onClick(item.authUrl, item.authName)"
            >
              <img :src="item.authIcon" class="image" />
              <div>{{ item.authName }}</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="beforeClose">关闭</el-button>
      </div>
    </wf-el-drawer>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { getLocalData } from '@/utils/localStore';

  export default {
    components: {},
    props: {},
    data() {
      return {
        isShow: false,
        direction: 'rtl',
        menuList: [],
      };
    },
    computed: {
      ...mapGetters('TagsView', ['tagsViewList']),
    },
    methods: {
      init() {
        this.isShow = true;
        if (getLocalData('menuList') && getLocalData('menuList').length > 0) {
          let list = getLocalData('menuList')[0]['childZTrees'];
          this.menuList = list;
        }
      },
      onClick(path, name) {
        this.beforeClose();
        this.$router.push(path);
        let tagsViewList = this.tagsViewList;
        const hasNav = tagsViewList.reduce((has, item) => {
          const checked = item.path === path;
          item.isSelect = checked;
          return has || checked;
        }, false);
        if (!hasNav) {
          tagsViewList.push({
            title: name,
            path: path,
            isSelect: true,
          });
        }
        this.$store.dispatch('TagsView/setTags', tagsViewList);
      },
      beforeClose() {
        this.isShow = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .module-title {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 15px 0;
  }
  .menu-wrap {
    border: 1px solid red;
  }
  .module-item {
    .item-wrap {
      width: 100px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      margin: 10px 0 10px 10px;
      white-space: nowrap;
      .image {
        width: 32px;
        height: 34px;
        margin: 10px 0 10px 0;
      }
    }
  }
</style>
